<template>
  <!-- 
使用说明：
1）、引入category-cascader.vue
2）、语法：<category-cascader :catelogPath.sync="catelogPath"></category-cascader>
    解释：
      catelogPath：指定的值是cascader初始化需要显示的值，应该和父组件的catelogPath绑定;
          由于有sync修饰符，所以cascader路径变化以后自动会修改父的catelogPath，这是结合子组件this.$emit("update:catelogPath",v);做的
      -->
  <div>
    <el-cascader
      filterable
      clearable
      placeholder="试试搜索:手机"
      v-model="paths"
      :options="categorys"
      :props="setting"
    ></el-cascader>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  //接受父组件传来的值
  props: {
    catelogPath: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    //这里存放数据
    return {
      setting: {
        value: "catId",
        label: "name",
        children: "children",
      },
      categorys: [],
      paths: this.catelogPath,
    };
  },
  // watch集合：会监控data数据集中的数据变化
  // 一旦发生变化，就会调用watch集合下与变化数据同名的方法，
  // 方法的输入值都是变换量的新值。
  watch: {
    // 监控catelogPath变量，一旦发生改变，就将新的值赋给paths变量
    catelogPath(v) {
      this.paths = this.catelogPath;
    },
    // 监控paths变量，一旦发生改变:
    paths(v) {
      // 首先向父模块传递一个名为catelogPath的参数，参数的值为paths变量的新值v.
      // 这个传递参数用update:修饰，这个参数代表更新，加不加不影响，主要是看父模块怎么处理
      this.$emit("update:catelogPath", v);
      // 然后使用pubsub-js进行传值
      // PubSub具有持久化的功能。
      // 下面的代码将会向PubSub中发布一个名为catPath，值为v的变量，
      // 这个变量将会一直存放在PubSub中，即便现在这个Vue被销毁了，这个值也还在PubSub中，
      // 其他Vue可以通过PubSub.subscribe("catPath",(msg,val)=>{处理val})来获取并处理这个变量。
      // 注意，每一次调用Category-cascader，PubSub中的catPath变量都会被新的值覆盖。
      // 你可以理解成，PubSub可以在子模块之间通信，也可以在父子模块间通信，而emit只能在父子模块通信
      this.PubSub.publish("catPath", v);
    },
  },
  //方法集合
  methods: {
    getCategorys() {
      console.log("获取三级菜单");
      this.$http({
        url: this.$http.adornUrl("/gulimallproduct/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        this.categorys = data.allcategory;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getCategorys();
  },
};
</script>
<style scoped>
</style>